<template>
  <!-- 
    使用此组件需要传递两个对象
    dialog(状态)和fromData(数据)
  -->
  <div class="dialog">
    <el-dialog
      :visible.sync="dialog.show"
      :title="dialog.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :append-to-body="false"
      :fullscreen="true"
      :show-close="false"
    >
      <el-form :model="formData" ref="form" :rules="rules">
        <el-form-item label="文章标题" prop="title" label-width="90px">
          <el-input v-model="formData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="body_md" label-width="90px">
          <div class="md">
            <mavon-editor
              ref="md"
              :codeStyle="codeStyle"
              :toolbars="markdownOption"
              v-model="formData.body_md"
              style="height: calc(100vh - 480px)"
              @imgAdd="$imgAdd"
              @imgDel="$imgDel"
            />
          </div>
        </el-form-item>
        <el-form-item label="作者" prop="create_user" label-width="90px">
          <el-input
            v-model="formData.create_user"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="class_name" label-width="90px">
          <el-select v-model="formData.class_name" placeholder="选择分类">
            <div v-for="(item, index) in classNameList" :key="index">
              <el-option :label="item" :value="item"></el-option>
            </div>
          </el-select>
        </el-form-item>

        <el-form-item label="标签" prop="taps" label-width="90px">
          <el-select v-model="formData.tags" multiple :multiple-limit="3">
            <el-option
              v-for="(item, index) in tagList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="dialog-button">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" class="submit" @click="submitForm('form')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'articledialog',
  data() {
    return {
      img_file: [],
      tagList: [
        "HTML",
        "CSS",
        "JavaScript",
        "Vue",
        "React",
        "Uniapp",
        "微信小程序",
        "Linux",
        "NodeJS",
        "Element-ui"
      ],
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      codeStyle: "monokai-sublime", //主题
      rules: {
        title: [{ required: true, message: "必填项", trigger: "blur" }],
        body_md: [{ required: true, message: "必填项", trigger: "blur" }],
        class_name: [{ required: true, message: "必填项", trigger: "blur" }],
        create_user: [{ required: true, message: "必填项", trigger: "blur" }],
      },
    };
  },
  props: {
    dialog: Object,
    formData: Object,
    classNameList: Array,
  },

  methods: {
    $imgAdd(pos, $file) {
      console.log("!!!!!!!!!!");
      // 第一步.将图片上传到服务器.
      const formdata = new FormData();
      formdata.append("imgFile", $file);
      this.img_file[pos] = $file;
      this.$axios
        .post("/api/upload/upload_image", formdata)
        .then((res) => {
          // const _res = res.data
          // 第二步.将返回的url替换到文本原位置[外链图片转存失败(img-v2eG7egk-1562220599730)(0)] -> [外链图片转存失败(img-RmlJ1kIp-1562220599733)(url)]
          // this.$refs.md.$img2Url(pos, _res.url)
          console.log(res);
          this.$refs.md.$img2Url(pos, res.data.imgSrc);
        })
        .catch((err) => console.log(err));
    },
    $imgDel(pos) {
      console.log(pos);
      delete this.img_file[pos];
    },
    cancel() {
      this.formData.title = "";
      this.formData.body_md = "";
      this.formData.class_name = "";
      this.formData.id = "";
      this.dialog.show = false;
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const url = `${
            this.dialog.option === "edit" ? `update/${this.formData.id}` : "add"
          }`;
          this.$axios.post(`/api/article/${url}`, this.formData).then((res) => {
            if (res.data.state) {
              this.$message({
                message: res.data.message,
                type: "success",
              });
              this.formData.title = "";
              this.formData.body_md = "";
              this.formData.create_user = "";
              this.formData.class_name = "";
              this.formData.tags = "";
              console.log(res.data);
              this.dialog.show = false;
              this.$emit("getArticle");
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">

.dialog-button {
  margin-left: 100px;
}
@media screen and (max-width: 750px) {
}
</style>